<template>
  <div class="page" id="money">
    <div class="money-top">
        <router-link :to="{ name: 'mingxi'}">
            <div class="mingx">明细</div>
        </router-link>
    </div>
    <div class="money-center">
        <span class="count">账户余额 (元)</span>
        <span class="count-last">{{ getMoney.money }}</span>
    </div>
   <div class="money-bottom" id="swipe">
        <span class="swipe-icon"><img :src="$qiniu.url+'assets/img/jiantou.png'"></span>
        <span class="chongzhi">充值</span>
        <span class="swipechongzhi">上滑充值</span>
        <span>页面将跳转到微店</span>
        <span>请认准形趣官方微店“ShapeJoy形趣”</span>
        <span>此入口为官方充值入口</span>
        <span>为了您的账户安全</span>
        <span>其他链接请谨慎操作！</span>
        <span>如有任何疑问，请联系客服。</span>
   </div>
  </div>
</template>
<script>
import {showFooter,errFun,refreshTitle} from "../../tools.js"


export default {
    computed:{
        getMoney(){
            return this.$store.state.money;
        }
    },
    created(){
        this.$store.dispatch('CHANGE_FOOTER_SHOW');//vuex形式实现的隐藏效果
        this.$store.dispatch('GET_MONEY');//vuex形式实现的隐藏效果        
        refreshTitle(this.$route.meta.title);
    },
    mounted(){
        // 代码保证 this.$el 在 document 中
        var app=document.getElementById('app');
        app.style.paddingBottom=0;
        var swipe=document.getElementById('swipe');
        swipe.addEventListener('touchend', function(e){
                swipe.style.transition="all 0.8s";
                if(swipe.style.height<="30%"){
                     swipe.style.height="70%";
                }
                else{
                     swipe.style.height="30%";
                }
            })
    },
    beforeDestroy() {
        this.$store.dispatch('CHANGE_FOOTER_SHOW'); // 当需求改变为当点击返回的时候，需要改变状态
    }
}
</script>
<style>
#money{
.page{
    position:relative;
}
.money-top{
    width:100%;
    height:50px;
    /*color:#156d5e;*/
    position:relative;
}
.money-top .mingx{
    position:absolute;
    top:0;
    right:0;
    width:65px;
    height:100%;
    color:#156d5e;
    text-align:center;
    font-weight: 700;
    font-size:16px;
    line-height: 50px;
}
.money-center{
    width:100%;
    height:120px;
    margin-top:70px;
}
.money-center .count{
    display:block;
    width:100%;
    height:50px;
    text-align:center;
    font-size:16px;
    line-height: 50px;
    color:#888;
}
.money-center .count-last{
    display:block;
    width:100%;
    height:60px;
    text-align:center;
    font-size:26px;
    font-weight: 700;
    line-height: 50px;
    color:#ffffff;
}
.money-bottom{
    width:120%;
    height:30%;
    position:fixed;
    bottom:-100px;
    left:-8%;
    border-radius: 100% / 50% ;
    background:#1a1d2c;
    overflow:hidden;
}
.money-bottom span{
    display:block;
    width:100%;
    height:20px;
    font-size:15px;
    line-height: 30px;
    color:#888;
    text-align:center;
    position:relative;
}
.money-bottom span.chongzhi{
    margin-top:20px;
    font-size:20px;
    line-height: 30px;
    color:#f9b811;
    margin-bottom:50px;
}
.money-bottom span.swipechongzhi{
    color:#156d5e;
    font-size:15px;
}
.money-bottom span.swipe-icon img{
    width:40px;
    height:30px;
    position: absolute;
	left: 0;
	top: 100%;
	right: 0;
	bottom: 0;
	margin: auto;
}
}
</style>
